<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue学习</title>
		
	</head>
	<body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
			<blog-post @add-title="postFontSize += 0.1" @reduce-title="postFontSize -= 0.1" v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('blog-post', {
				props: ['post'],
				template: `
				    <div class="blog-post">
					   <h3>{{post.title}}</h3>
					   <button @click="$emit('add-title')">增大字体</button>
					    <button @click="$emit('reduce-title')">减小字体</button>
					   <div v-html="post.content"></div>
					</div>
				`
			})
			new Vue({
				el: '#app',
				data: {
					posts: [{
							id: 1,
							title: '花岗岩'
						},
						{
							id: 2,
							title: '青石'
						},
						{
							id: 3,
							title: '白石'
						}
					],
					postFontSize: 1
				}
			})
		</script>

	</body>
</html>
